<template>
  <view class="p-h24">
    <view class="main-view m-t40 p-h24">
      <view class="card flex">
        <text class="text-700-130">学校名称：</text>
        <input
          v-model="formState.title"
          class="flex-1 text-700-130 text-r"
          type="text"
          placeholder="请填写"
          placeholder-class="text-400-430" />
      </view>
      <view class="card flex" @click="openDegreePicker(formState.quali)">
        <text class="flex-1 text-700-130">学历：</text>
        <text v-if="formState.quali" class="text-700-130">{{ formState.quali }}</text>
        <text v-else class="text-400-430">请选择</text>
        <image class="square-36 m-l10" src="@/static/images/public/arrow-3.png" />
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">专业：</text>
        <input
          v-model="formState.speciality"
          class="flex-1 text-700-130 text-r"
          type="text"
          placeholder="请填写"
          placeholder-class="text-400-430" />
      </view>
      <view class="card flex" @click="openDatePicker('start', formState.enrol_time)">
        <text class="flex-1 text-700-130">入学年份：</text>
        <text v-if="formState.enrol_time" class="text-700-130">{{ formState.enrol_time }}</text>
        <text v-else class="text-400-430">请选择</text>
        <image class="square-36 m-l10" src="@/static/images/public/arrow-3.png" />
      </view>
      <view class="card flex" @click="openDatePicker('end', formState.end_time)">
        <text class="flex-1 text-700-130">毕业时间：</text>
        <text v-if="formState.end_time" class="text-700-130">{{ formState.end_time }}</text>
        <text v-else class="text-400-430">请选择</text>
        <image class="square-36 m-l10" src="@/static/images/public/arrow-3.png" />
      </view>
    </view>

    <!--
      <view class="add-view flex-c m-t20">
      <view class="icon-view flex-c square-40">
      <image class="square-20" src="@/static/images/mine/add.png" />
      </view>

      <text class="m-l10 text-500-528">添加教育经历</text>
      </view>
    -->

    <view class="flex-sb m-t240">
      <RcButton :width="340" text="确认" @click="onSubmit" />
      <RcButton
        :width="340"
        background="#E9E9E9"
        color="#646464"
        text="取消"
        @click="onCancel" />
    </view>
    <up-picker
      ref="degreePickerRef"
      title="学历"
      :show="showDegreePicker"
      :columns="[degreePickerColumns]"
      @confirm="onDegreePickerConfirm"
      @cancel="closeDegreePicker" />
    <up-datetime-picker
      v-model="selectedDate"
      title="选择日期"
      :show="showDatePicker"
      :minDate="new Date('1990-01-01').getTime()"
      :maxDate="Date.now()"
      mode="date"
      @confirm="onDatePickerConfirm"
      @cancel="closeDatePicker" />
  </view>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import RcButton from '@/components/button.vue'
  import type { TResumeEdu } from '@/types/api.d'
  import { useEduDatePicker } from './useEduDatePicker'
  import { useEduDegree } from './useEduDegree'
  import { timeFormat } from '@/utils/utils'

  let eduId: number | null = null

  const isUpdate = ref(false)

  const formState = reactive({
    title: '',
    quali: '',
    speciality: '',
    enrol_time: '',
    end_time: '',
  })

  const {
    pickerRef: degreePickerRef,
    columns: degreePickerColumns,
    show: showDegreePicker,
    open: openDegreePicker,
    close: closeDegreePicker,
  } = useEduDegree()

  const {
    selected: selectedDate,
    isStartPicker,
    show: showDatePicker,
    open: openDatePicker,
    close: closeDatePicker,
  } = useEduDatePicker()

  const onDegreePickerConfirm = (e: any) => {
    const val = e.value[0]

    formState.quali = val

    closeDegreePicker()
  }

  const onDatePickerConfirm = () => {
    if (isStartPicker.value) {
      formState.enrol_time = timeFormat(selectedDate.value)
    } else {
      formState.end_time = timeFormat(selectedDate.value)
    }

    closeDatePicker()
  }

  // 重新加载上一个页面的数据
  const reloadPrePage = () => {
    const pages = getCurrentPages()
    const page = pages[pages.length - 2]
    page.$vm.$.exposed.getMyResume()
  }

  const onSubmit = () => {
    if (!validate()) return

    const url = isUpdate.value ? '/educate/edit' : '/educate/add'
    const data: Record<string, any> = { ...formState }
    if (isUpdate.value) {
      data.id = eduId
    }

    uni.$u.post(url, data).then((res) => {
      uni.showToast({ title: res.msg, icon: 'none' })

      if (res.code === 1) {
        reloadPrePage()
        uni.navigateBack()
      }
    })
  }

  const onCancel = () => {
    // uni.$u.post('/educate/del', { id: eduId }).then((res) => {
    //   uni.showToast({ title: res.msg, icon: 'none' })

    //   if (res.code === 1) {
    //     reloadPrePage()
    //     uni.navigateBack()
    //   }
    // })

    uni.navigateBack()
  }

  const validate = () => {
    if (formState.title === '') {
      uni.showToast({
        title: '请填写学校',
        icon: 'none',
      })
      return false
    }
    if (formState.quali === '') {
      uni.showToast({
        title: '请选择学历',
        icon: 'none',
      })
      return false
    }
    if (formState.speciality === '') {
      uni.showToast({
        title: '请填写专业',
        icon: 'none',
      })
      return false
    }
    if (formState.enrol_time === '') {
      uni.showToast({
        title: '请选择入学年份',
        icon: 'none',
      })
      return false
    }
    if (formState.end_time === '') {
      uni.showToast({
        title: '请选择毕业时间',
        icon: 'none',
      })
      return false
    }

    return true
  }

  onLoad((e) => {
    isUpdate.value = e?.type === 'update'

    if (isUpdate.value) {
      uni.setNavigationBarTitle({ title: '编辑教育经历' })
      uni.getStorage({
        key: 'RESUME_EDU_RECORD',
        success: (res) => {
          const record = JSON.parse(res.data) as TResumeEdu
          eduId = record.id
          formState.title = record.title
          formState.quali = record.quali
          formState.speciality = record.speciality
          formState.enrol_time = record.enrol_time
          formState.end_time = record.end_time
        },
      })
    } else {
      uni.setNavigationBarTitle({ title: '添加教育经历' })
    }
  })
</script>

<style lang="scss">
	page {
		background-color: $page-color-4;
	}
</style>

<style lang="scss" scoped>
	.main-view {
		border-radius: 10rpx;
		background-color: $bg-color-1;
	}

	.card {
		height: 102rpx;
		border-bottom: 1rpx solid $border-color-4;

		&:last-child {
			border: none;
		}
	}

	// .add-view {
	// 	height: 82rpx;
	// 	border-radius: 10rpx;
	// 	background-color: $bg-color-1;

	// 	.icon-view {
	// 		border-radius: 50%;
	// 		background-color: $bg-color-5;
	// 	}
	// }
</style>
